<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<!-- vue框架：视图的双向绑定 -->
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<!-- axios：进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="js/axios.js"></script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style-type: none;
			}

			/* ========================================= 导航条开始*/
			.mian {
				width: 100%;
				margin: 0 auto;
				position: relative;
			}

			html {
				background-color: #dddddd;
			}

			.top {
				height: 70px;
				min-width: 1465px;
				font-size: 50px;
				background-color: #484848;
			}

			.top a {
				text-decoration: none;
				color: #ffffff;
				padding: 20px 0;

			}

			.top1 {
				height: 70px;
				width: 100px;
				font-family: '仿宋';
				float: left;
				display: inline-block;
				margin-left: 10px;
				font-size: 35px;
				font-weight: bold;
				margin-left: 30px;
				margin-left: auto;
				margin-right: auto;

			}

			.top2 {
				height: 70px;
				width: 100px;
				font-family: '仿宋';
				float: right;
				display: inline-block;
				font-size: 35px;
				font-weight: bold;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.top2:hover {
				/*鼠标经过悬停动态效果*/
				background: #a00;
			}

			.li {
				display: inline-block;
				width: 100px;
				height: 40px;
				border: 1px solid #888;
				line-height: 40px;
				text-align: center;
				color: #000;
				font-size: 16px;
				cursor: pointer;
			}

			/* ========================================= 导航条结束*/
			/* 表格开始 ========================================*/

			/* .fuye1 */

			/* .container
				{
				width: 100%;
				display: flex;
				height: 440px;
				background-color: palegoldenrod;
				border-bottom: 1px solid red;
				position: relative;
			} */

			
			.container  {
				width: 152px;
				margin: 30px 30px 30px 10px;
				cursor: pointer;
				/*鼠标浮动显示小手*/
				position: relative;
			}
			
			.container .tab1{
				/* border: 2px solid #000; */
				color: #f60;
				position: absolute;
				left: 5px;
				top: 0px;
				width: 154px;
				height: 400px;
				line-height: 24px;
			}
			
			.container .tab2 {
				/* border: 2px solid #000; */
				/* width: 980px; */
				color: #f60;
				position: absolute;
				/* float: right; */
				left: 345px;
				top: 25px;
				width: 900px;
				height: auto;
				text-decoration: none;
			}
			

			.container .reserve {
				width: 152px;
				height: 40px;
				display: block;
				margin-left: 0px;
				font-size: 30px;
				text-decoration: none;
				/*清除下划线*/
				line-height: 40px;
				background-color: #f60;
				color: #ddd;
				text-align: center;
			}

			.container .reserve:hover {
				background-color: #458b00;
				color: #fff;
			}

			.ticket {
				color: #666;
				font-size: 20px;
			}

			/* .ticket h2 {
				font-size: 20px;
				font-weight: normal;
				letter-spacing: 1px;
				text-indent: 8px;
				height: 40px;
				line-height: 40px;
				background-color: #fafafa;
				color: #666;
				text-align: left;
			} */

			.ticket table {
				margin: 20px 0 0 0;
				width: 100%;
				border: 1px solid #ddd;
				border-collapse: collapse;
			}

			/* .ticket th {
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid #6c6c6c;
			} */

			.ticket td {
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid #6c6c6c;
				text-align: center;

			}

			.ticket tr:nth-child(2n) {
				background-color: #fafafa;
			}

			.ticket tr:hover {
				background-color: #eee;
			}

			/* .container .reserve {
				margin: 10px 0 0 0;
			} */

			/* .price {
				color: #f60;
			} */

			.more {
				color: #666;
			}
			/* .container{
				
				width: 154px;
				border: 2px solid #000;
			} */
			/* 表格结束 ====================================================================*/
			/*===========================================页脚开始*/
			.a1{	
				width: 100%;
				height: 132px;
				top: 610px;
				position: absolute;
				background-color: #484848;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			/*===========================================页脚结束*/
			
		</style>
	</head>
	<body>
		<!-- ========================================= 导航条开始 -->
		<div class="top mian">
			<li>
				<div class="top1"><a href="#"><img src="../images/tb.jpg" alt=""></a></div>
				<div class="top2"><a href="#">商品</a></div>
				<div class="top2"><a href="#">订单</a></div>
				<div class="top2"><a href="#">库存</a></div>
				<div class="top2"><a href="#">用户</a></div>
				<div class="top2"><a href="#">财务</a></div>
				<div class="top2"><a href="#">设置</a></div>
			</li>
		</div>
		<!-- ========================================= 导航条结束 -->
		<!-- ========================================= 主体开始 -->
		<div class="container ">
			<div class="ticket tab1">
				<table>
					<tr>
						<td><a href="###" class="reserve">待付款</a></td>
					</tr>
					<tr>
						<td><a href="###" class="reserve">待发货</a></td>
					</tr>
					<tr>
						<td><a href="###" class="reserve">待收货</a></td>
					</tr>
					<tr>
						<td><a href="###" class="reserve">待评价</a></td>
					</tr>
					<tr>
						<td><a href="###" class="reserve">售后</a></td>
					</tr>
					<tr>
						<td><a href="###" class="reserve">退款</a></td>
					</tr>
					<tr>
					</tr>
					<tfoot>
						<tr>
							<td colspan="7"><a href="###" class="more">更多设置...</a></td>
						</tr>
					</tfoot>
				</table>
				<!-- ========================================= 左侧列表导航结束 -->
				<!-- ===========================================右侧功能开始  -->
				<div class="ticket tab2">
					<table id="tab">
					<h1>待发货</h1>
						<thead>
						
							<tr>
								<th>商品名称</th>
								<th>商品编号</th>
								<th>商家</th>
								<th>发货地址</th>
								<th>联系电话</th>
								<th>收货地址</th> 
								<th>收货人</th>
								<th>联系电话</th>
								<th>确认发货</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="u in users">
								<td>{{u.id}}</td>
								<td>{{u.username}}</td>
								<td>{{u.password}}</td>
								<td>{{u.age}}</td>
								<td>{{u.gender}}</td>
							</tr>
						</tbody>
					</table>
					<script type="text/javascript">
						let vue = new Vue({
							el: '#tab',
							data: {
								users: []
							},
							created() {
								// url:异步请求地址 此处应是订单数据库异步访问地址进行显示
								axios.get('/orderSystem/selectUser.do').then(
									function(res_obj) {
										vue.users = res_obj.data;
									}
								).catch(
									function(error_obj) {
										alert("网络加载异常！！！")
									}
								)
							}
						});
					</script>
				</div>
			</div>
		</div>
		<!-- ===========================================右侧功能结束  -->
		<!-- ===========================================页脚开始  -->
		<div class="a1">
			<h1>二组</h1>
		</div>
		<!-- ===========================================页脚结束  -->
	</body>
</html>